* {
   margin: 0;
   padding: 0;
}

ul {
   list-style: none;
}

/* 版心设置 */
.center {
   width: 1380px;
   margin: 0 auto;
}

body {
   background-color: #fff;
   font-family: ".萍方-简";
   overflow-x: hidden;
}

a,
button {
   border: none;
   cursor: pointer;
   color: #06C;
   text-decoration: none;
}

button:hover {
   text-decoration: underline;
}

a {
   text-decoration: none;
   color: #2997ff;
   font-size: 17px;
}

a:hover {
   text-decoration: underline;
}

/* *****************一楼样式设置********************* */
.f1 {
   border-bottom: 1px solid #cececf;
   position: fixed;
   top: 44px;
   right: 0;
   left: 0;
   z-index: 990;
   -webkit-backdrop-filter: saturate(150%) blur(10px);
   backdrop-filter: saturate(150%) blur(10px);
   background-color: rgba(255,255,255,0.3);
}
.f1.scroll{
   position: fixed;
   top: 0px;
   right: 0;
   left: 0;
 }

.f1 .box {
   display: flex;
   justify-content: space-center;
   align-items: center;
   position: relative;
   left: 15%;
   font-size: 21px;
   font-weight: 600;
   height: 48px;
}

/* *******************二楼样式设置****************************** */
.f2 {
   background-color: #f5f5f7;
}

.f2 .box {
   padding: 16px 0;
}

.f2 .box p {
   text-align: center;
   margin: 0 auto;
   width: 620px;
   font-size: 14px;
   font-weight: 400;
}

/* ----------------------------- 三楼样式代码 ------------------------*/
/*------------------- 三楼左边区域 */
.f3 {
   width: 1380px;
   margin: 0 auto;
}
.f3 .center {
   width: 1380px;
}
.f3 .center .f3type {
   display: flex;
   justify-content: space-between;
   margin-bottom: 150px;
   position: relative ;
   height: 1831px;
   width:1380px ;
}
.f3type .fl.scroll {
   position: fixed;
}
.f3type .fl.scroll1{
   position: absolute;
    left: 0;
    bottom: 0;
}
.f3 .center .f3type .fl {
   width: 730px;
   margin-right: 50px;
}

.f3 .center .f3type .fl .fl_1 {
   display: block;
   text-align: center;
   margin: 100px 50px 70px;
}

.f3 .center .f3type .fl .fl_1 img {
   margin: 0 auto;
   width: 550px;
   height: 550px;
}

.f3 .center .f3type .fl .fl_2 {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   text-align: center;
}

.f3 .center .f3type .fl .fl_2 p {
   font-size: 12px;
   font-weight: 600;
}

/*----------------------- 三楼右边区域 */
.f3 .center .f3type .fr {
   width: 477px;
   margin-right: 123px;
   position: absolute;
   right: 0px;
   top:0;
}

.f3 .center .f3type .fr .fr_1 {
   display: block;
   width: 477px;
   margin: 55px auto 40px;
}

.f3 .center .f3type .fr .fr_1 span {
   display: block;
}

.f3 .center .f3type .fr .fr_1 span:first-child {
   font-size: 21px;
   font-weight: 600;
   margin-bottom: 6px;
}

.f3 .center .f3type .fr .fr_1 span:nth-child(2) {
   font-size: 32px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_1 div:nth-child(3) {
   font-size: 14px;
   font-weight: 400;
   margin-top: 14px;
}

.f3 .center .f3type .fr .fr_1 div:nth-child(4) {
   font-size: 14px;
   font-weight: 400;
   margin-top: 14px;
}

.f3 .center .f3type .fr .fr_1 div:nth-child(5) {
   font-size: 14px;
   font-weight: 400;
   margin-top: 11.2px;
}

/* 三楼右边区域 第二部分 */
.f3 .center .f3type .fr .fr_2 {
   display: flex;
   justify-content: left;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.f3 .center .f3type .fr .fr_2 div {
   margin-top: 9px;
   margin-bottom: 11px;
}

.f3 .center .f3type .fr .fr_2 div:nth-child(1) {
   margin-right: 60px;
   font-size: 17px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_2 div:nth-child(2) {
   margin-right: 60px;
   font-size: 17px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.4);
}

/*----------------- 三楼右边区域第三部分 */
.fr_3 {
   display: block;
   width: 477px;
   margin: 25px auto;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fr_3 div:nth-child(1) {
   font-size: 12px;
   font-weight: 600;
   /* margin-bottom: 17px; */
}

.fr_3 div:nth-child(2) {
   font-size: 12px;
   font-weight: 600;
   /* margin: 17px auto; */
}

/* .fr_3 div:nth-child(2) img {
   margin: 0px 7px;
} */

.fr_3 div:nth-child(3) p {
   font-size: 15px;
   font-weight: 400;
   margin-bottom: 15px;
}

.fr_3 button {
   display: block;
   box-sizing: border-box;
   font-size: 15px;
   color: #000;
   display: inline-block;
   margin: 13px 0 0;
   padding: 2px;
   border-radius: 30px;
   background: linear-gradient(90deg, #fdde5c, #f8ab5e, #f56a62, #a176c8, #759beb, #65beb3, #70db96);
   margin-bottom: 25px;
}

.fr_3 button span {
   padding: 9px 20px 10px;
   background: #fff;
   display: block;
   border-radius: 30px;
}

/* ---------------------右边区域第四部分 ------------------*/
.f3 .center .f3type .fr .fr_3_4 {
   margin-bottom: 20px;
   font-size: 15px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_4 {
   width: 443px;
   height: 60px;
}

.f3 .center .f3type .fr .fr_4 {
   border: 2px solid #d2d2d7;
   display: flex;
   justify-content: space-between;
   align-items: space-between;
   border-radius: 18px;
   padding: 15px 15px;
   margin-bottom: 20px;
}

.f3 .center .f3type .fr .fr_4 div {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

.f3 .center .f3type .fr .fr_4:hover {
   border: 2px solid rgb(0, 113, 227);
}
.active{
   border: 2px solid rgb(0, 113, 227) !important;
}
.f3 .center .f3type .fr .fr_4 .rmb {
   font-size: 17px;
   font-weight: 400;
}

.f3 .center .f3type .fr .fr_4 .text p:nth-child(1) {
   font-size: 17px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_4 .text p:nth-child(2) {
   font-size: 12px;
   font-weight: 400;
}

/*------------------------- 第五部分 ---------------------*/
.f3 .center .f3type .fr .fr_5 {
   width: 443px;
   height: 60px;
}

.f3 .center .f3type .fr .fr_5 {
   border: 2px solid #d2d2d7;
   display: flex;
   justify-content: space-between;
   align-items: space-between;
   border-radius: 18px;
   padding: 15px 15px;
   margin-bottom: 20px;
}

.f3 .center .f3type .fr .fr_5 div {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

.f3 .center .f3type .fr .fr_5:hover {
   border: 2px solid rgb(0, 113, 227);
}

.f3 .center .f3type .fr .fr_5 .rmb {
   font-size: 17px;
   font-weight: 400;
}

.f3 .center .f3type .fr .fr_5 .text p:nth-child(1) {
   font-size: 17px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_5 .text p:nth-child(2) {
   font-size: 12px;
   font-weight: 400;
}

.f3 .center .f3type .fr .fr_5_6 {
   font-size: 12px;
   font-weight: 400;
   padding-bottom: 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   color: #06C;
   text-decoration: none;
}

.f3 .center .f3type .fr .fr_5_6:hover {
   text-decoration: underline;
}

/* ----------------------- 右边区域第六部分 ----------------------- */
.f3 .center .f3type .fr .fr_6 {
   margin-bottom: 30px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.f3 .center .f3type .fr .fr_6 div:nth-child(1) {
   font-size: 15px;
   font-weight: 600;
   margin: 15px auto;
}

.f3 .center .f3type .fr .fr_6 a:nth-child(2) {
   font-size: 14px;
   font-weight: 400;
   margin: 15px auto;
}

.f3 .center .f3type .fr .fr_6 div:nth-child(3) {
   font-size: 17px;
   font-weight: 600;
   margin: 15px auto;
}

.f3 .center .f3type .fr .fr_6 div:nth-child(4) {
   font-size: 15px;
   font-weight: 400;
   margin: 15px auto;
}

.f3 .center .f3type .fr .fr_6 a:nth-child(5) {
   font-size: 14px;
   font-weight: 400;
   margin: 15px auto;
}

.f3 .center .f3type .fr .fr_6 div:nth-child(6) {
   font-size: 14px;
   font-weight: 400;
   margin: 50px auto 15px;
}

.f3 .center .f3type .fr .fr_6 div:last-child {
   margin: 11.2px auto;
   display: flex;
   justify-content: left;
}

.f3 .center .f3type .fr .fr_6 div:last-child img:nth-child(1) {
   width: 50px;
   height: 41px;
   margin-right: 25px;
}

.f3 .center .f3type .fr .fr_6 div:last-child img:nth-child(2) {
   width: 76px;
   height: 41px;
   margin-right: 25px;
}

.f3 .center .f3type .fr .fr_6 div:last-child img:nth-child(3) {
   width: 70px;
   height: 41px;
}

/* ------------------------- 右边区域第七部分 ------------------- */
.f3 .center .f3type .fr .fr_6_7 {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 25px;
}

.f3 .center .f3type .fr .fr_7 {
   width: 443px;
   height: 60px;
}

.f3 .center .f3type .fr .fr_7 {
   border: 2px solid #06c;
   display: flex;
   justify-content: space-between;
   align-items: space-between;
   border-radius: 18px;
   padding: 15px 15px;
   margin-bottom: 20px;
}

.f3 .center .f3type .fr .fr_7 div {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
}

/* .f3 .center .f3type .fr .fr_7:hover {
   border: 2px solid rgb(0, 113, 227);
} */

.f3 .center .f3type .fr .fr_7 .rmb {
   font-size: 17px;
   font-weight: 400;
}

.f3 .center .f3type .fr .fr_7 .text p:nth-child(1) {
   font-size: 17px;
   font-weight: 600;
}

.f3 .center .f3type .fr .fr_7 .text p:nth-child(2) {
   font-size: 12px;
   font-weight: 400;
}

/*---------------------------- 右边区域添加购物袋样式 -----------------*/
.f3 .center .f3type .fr .fr_8 {
   background-color: #fbfbfd;
   padding: 30px;
   margin-top: 30px;
}

.f3 .center .f3type .fr .fr_8 .fr_8_1 {
   padding-bottom: 30px;
   border-bottom: 1px solid #d2d2d7;
}

.f3 .center .f3type .fr .fr_8 .fr_8_1 p {
   font-size: 14px;
}

.f3 .center .f3type .fr .fr_8 .fr_8_1 p:nth-child(4) {
   padding: 16px 0;
   font-size: 12px;
   color: #0071e3;
   text-decoration: none;
}

.f3 .center .f3type .fr .fr_8 .fr_8_1 p:nth-child(4):hover {
   text-decoration: underline;
}

.f3 .center .f3type .fr .fr_8 .f3 .center .f3type .fr .fr_8 .fr_8_2 {
   padding: 30px 0;
   border-bottom: 1px solid #d2d2d7;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2>div {
   display: flex;
   justify-content: flex-start;
   padding-top: 20px;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2>div>div {
   padding-top: 5px;
   padding-left: 10px;
   font-size: 12px;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2 img {
   display: block;
   width: 35px;
   height: 35px;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2 a {
   font-size: 12px;
   color: #000;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2 div:nth-child(2) div a {
   font-size: 12px;
   font-weight: 600;
   color: #000;

}

.f3 .center .f3type .fr .fr_8 .fr_8_2 div:nth-child(2) div p span {
   color: #0071e3;
}

.f3 .center .f3type .fr .fr_8 .fr_8_2 div:nth-child(1) div a span {
   color: #0071e3;
}

.f3 .center .f3type .fr .fr_8 button {
   width: 350px;
   height: 36px;
   background-color: #0071e3;
   font-size: 17px;
   color: #fff;
   border: none;
   border-radius: 10px;
   margin-top: 20px;
}

/* ------------------- 包装内容部分 ----------------------- */
.f4 .center .box {
   text-align: center;
   width: 980px;
   margin: 0 auto;
}

.f4 .center .box h2 {
   font-size: 40px;
}

.f4 .center .box .box1 {
   display: flex;
   justify-content: center;
   margin-top: 50px;
}

.f4 .center .box .box1 div>div {
   width: 250px;
   background-color: #fafafa;
   margin-bottom: 30px;
}

.f4 .center .box .box1 div .box1-1 {
   width: 330px;
}

.f4 .center .box .box1 div .box3-1 {
   width: 330px;
}

.f4 .center .box .box1 p {
   font-size: 14px;
}

.f4 .center .box .box3 {
   margin-top: 50px;
   width: 900px;
   margin: 50px auto;
   font-size: 12px;
}